<template>
  <div class="Play">
    <audio ref="myAudio" :src="state.songUrl" @timeupdate="updateTime" @ended="end" @pause="paused"></audio>
    <div class="bg">
      <div class="Play__bg" :style="` background-image: url(${state.song.picUrl})`"></div>
    </div>
    <mHeaderVue :showback="true" :isblack="false" :title="state.song.name"></mHeaderVue>
    <div class="Play__main">
      <div class="Play__bar">
        <span class="Play__bar--logo">
          <img src="../assets/2.png" />
          网易云音乐
        </span>
        <div class="Play__bar--main" :style="cdTranslate">
          <div class="Play__bar--img">
            <img :src="state.song.picUrl" />
          </div>
          <div class="Play__bar--icon" @click="isPlay">
            <i class="iconfont icon-zantingtingzhi2" v-if="Aplay"></i>
            <i class="iconfont icon-wodetubiao-253" v-else></i>
          </div>
        </div>
      </div>


      <div class="wrapper" ref="wrapper">
        <ul class="content">
            <li 
            v-for="(item,index) in lyric.lines" 
            :key="index" 
            :class="[currentLyric == index ? 'current': '','scrollItem']">
            {{item.txt}}
          </li>
        </ul>
      </div>


    </div>
  </div>
 
</template>

<script setup >
import Lyric from 'lyric-parser'
import { getLyric } from "../request/api";
import mHeaderVue from "../components/m-header.vue";
import { computed, onMounted, reactive, watch } from "@vue/runtime-core";
import { useRoute } from "vue-router";
import { getSongDetail, getSongUrl } from "../request/api";
import { ref } from "vue";

const route = useRoute()

const state = reactive({
  songUrl: '',
  song: {},
})

// 获取歌曲详情
onMounted(async () => {
  const res = await getSongDetail({ ids: route.params.ids })
  // console.log(res);
  state.song = res.songs[0].al
})

// 获取歌曲地址
onMounted(async () => {
  // console.log(route.params);
  const res = await getSongUrl({ id: route.params.ids })
  // console.log(res);
  state.songUrl = res.data[0].url
})




// 获取音频DOM
const myAudio = ref(null)
// 胶片滚动角度
const deg = ref(0)
const animatePlay = ref('')

// 胶片滚动动画
const animatePlayBar = () => {
  deg.value = deg.value + 0.2
  animatePlay.value = requestAnimationFrame(animatePlayBar)
}

// 控制DOM转动角度
const cdTranslate = computed(() => {
  return `transform: rotate(${deg.value}deg) scale(1.5)`
})

// 音频是否播放
const Aplay = ref(false)

//  点击播放暂停
const isPlay = () => {
  Aplay.value = !Aplay.value
  lyric.value.togglePlay()
}

// 监听音频是否播放
watch(Aplay,
  () => {
    // 音乐暂停
    if (!Aplay.value) {
      myAudio.value.pause()
      cancelAnimationFrame(animatePlay.value);
    } else {
      myAudio.value.play()
      animatePlay.value = requestAnimationFrame(animatePlayBar)
    }
  })

//音乐结束
const end = () => {
  console.log('音乐结束了');
  Aplay.value = false
}

// 处理歌词
// 歌词处理
const  currentLyric = ref(0)
// const myLine = ref(null)
const wrapper = ref(null)
const lyric = ref(0)
// const title = ref('')


onMounted(async () => {
  let res = await getLyric({ id: route.params.ids })
  lyric.value = new Lyric( res.lrc.lyric,  handleLyric)
  function handleLyric({lineNum}){
    currentLyric.value = lineNum
    if( currentLyric.value > 1) {
      wrapper.value.scrollTop =  (currentLyric.value -1) *34 
    }
  } 
})
</script>



<style lang="stylus" scoped>
.Play
  width 100vw
  height 100vh
  overflow hidden
  .bg
    position: absolute;
    width 100vw
    height 100vh
    overflow hidden
    z-index -999;
    filter: contrast(60%);
  .Play__bg
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position top center
    background-size cover
    background-repeat no-repeat
    z-index: -1;
    filter: blur(15px);
    transform scale(1.2)
  .Play__main
    margin-top 15px
    overflow hidden
    overflow-y scroll
    height calc(100vh - 54px)
    padding 0 14px
    .Play__bar
      position relative
      display flex
      align-items center
      justify-content center
      height 60%
      .Play__bar--logo
        display flex
        position absolute
        left 0
        top 0
        height 17px
        line-height 17px
        width 100px
        color white
        font-size 13px
        img
          margin-right 5px
          width 17px
          height 100%
      .Play__bar--main
        border-radius 50%
        box-sizing border-box
        background url('../assets/coverall.png')
        width 200px
        height 200px
        background-position: -142px -582px;
        margin 0 auto  
        display flex
        justify-content center
        align-items center
        box-shadow inset 0px 0px 0px 6px #565656
        .Play__bar--img
          width 140px
          height 140px
          border-radius 50%
          overflow hidden
          img
            width 100%
            height 100%
        .Play__bar--icon
          position absolute
          .iconfont
            color white
            font-size 44px
            font-weight 300
.wrapper
  height 102px
  overflow-y scroll
  .content
    color white
    .scrollItem
      box-sizing border-box
      margin-bottom 10px
      overflow hidden
      font-size 16px
      height 24px
      width 100%
      text-align center
      line-height 24px
      white-space nowrap
      text-overflow ellipsis
      opacity 0.3
    .current
      transition 1s all ease-in-out
      opacity  1
</style>